# Loader analysis and optimization

import NextSteps from '@components/NextSteps';
import Step from '@components/Step';

Optimizing loaders is a common way to improve the performance of Rspack or webpack compilation. In most cases, besides replacing the loader with a faster one, we can also reduce execution by setting [module.rule.exclude](https://webpack.js.org/configuration/module/#ruleexclude) for the loader.

Rsdoctor provides two core modules, [Loader Overall](/guide/usage/loaders-timeline) and [Loader Analysis](/guide/usage/loaders-analysis), to help you optimize based on the loader's invocation information.

## How to analyze?

Regardless of the optimization method used for loaders, we need to obtain data information about the loaders, such as **which files a loader compiles** and **time-consuming information for compiling certain files**, in order to optimize more accurately.

### File tree structure

With the Loader Analysis module provided by Rsdoctor, we can see **a tree structure composed of all files that pass through the loaders during the entire compilation process**, as shown in the following figure:

<img
  src="https://assets.rspack.rs/others/assets/rsdoctor/loader-analysis-all.png"
  width="600px"
  style={{ margin: 'auto' }}
/>

### Analyzing directories

By **clicking on a directory**, you can see the **time-consuming statistics of all loaders** under the currently **selected directory** on the right side of the file tree, such as the number of files processed by a loader and **the estimated time** consumption. The content of the "Statistics of \*\*\*" card is shown in the following figure:

<img
  src="https://assets.rspack.rs/others/assets/rsdoctor/loader-analysis-table.png"
  width="300px"
  height="400px"
  style={{ margin: 'auto' }}
/>

We can intuitively know **the time-consuming data of this folder**, such as the number of files processed by a certain loader and the estimated time consumption, as well as the sum of all data, which further helps us make decisions on how to optimize the loader.

:::tip Optimization Tips
Usually, in the directories of third-party libraries inside **`node_modules`**, we can easily determine whether it is necessary to set [module.rule.exclude](https://webpack.js.org/configuration/module/#ruleexclude) for this directory based on the time-consuming information of the loader, in order to reduce the execution of loaders with long execution time, such as the common `babel-loader`.
:::

### Analyzing files

By **clicking on a file**, a mask layer will pop up, showing a list of all loaders that have been executed on the currently clicked file. By **clicking on a loader**, you can see the **input**, **output**, and **parameter data information of the target loader** when it is called.

<img
  src="https://assets.rspack.rs/others/assets/rsdoctor/loader-analysis-code-change.png"
  width="600px"
  style={{ margin: 'auto' }}
/>

- Parameter Data Information: Click on "**show more**" or the expand button in the upper left corner to view the corresponding parameter information.

<img
  src="https://assets.rspack.rs/others/assets/rsdoctor/loader-analysis-options.png"
  width="600px"
  style={{ margin: 'auto' }}
/>

We can use the loader information of individual files here to troubleshoot issues and decide whether to add them to [module.rule.exclude](https://webpack.js.org/configuration/module/#ruleexclude).

:::tip Optimization Tips
Usually, for internal packages inside the project (i.e., outside the cwd, usually the workspace), we can determine whether it is necessary to set [module.rule.exclude](https://webpack.js.org/configuration/module/#ruleexclude) for this directory based on **the loader time-consuming information** of the directory and **the input-output information** of individual files (because these internal packages may already have good compatibility with ES syntax).
:::

## Learn more

You may want to learn more about the usage of the Loader Analysis module:

<NextSteps>
  <Step
    href="/guide/usage/loaders-timeline"
    title="Loader Timeline Usage"
    description="Learn how to use the Loader Timeline in Rsdoctor"
  />
  <Step
    href="/guide/usage/loaders-analysis"
    title="Loader Analysis Usage"
    description="Learn how to operate and use the Loader Analysis in Rsdoctor"
  />
</NextSteps>
